Skip to content

Make customData available to interactive atoms - #16612

Merged
frederickobrien merged 3 commits into
mainfrom
custom-data-for-interactive-atoms
Sep 3, 2026
Merged

Make customData available to interactive atoms#16612
frederickobrien merged 3 commits into
mainfrom
custom-data-for-interactive-atoms

Conversation

@frederickobrien

@frederickobrien frederickobrien commented Aug 26, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

The final domino in the parameterised interactives sequence, this takes the newly available customData passed down with interactive atoms and adds a data-atom-custom-data attribute to the container if it's there, thereby allowing atoms to access configuration, content, etc. defined in Composer rather than publishing new atoms for even the slightest variation.

Custom data set for interactive atoms in Composer...

image

Is now available in Dotcom through a new data attribute:

image

Atoms can then use a snippet like this to get the data:

const getAtomCustomData = <T>(id: string): T | null => {
	const getAtomContainer = (id: string): Element | null =>
		document.querySelector(`[data-atom-id="${id}"]`);
	const container = getAtomContainer(id);
	if (!container) return null;
	const raw = container.getAttribute('data-atom-custom-data');
	if (!raw) return null;
	try {
		return JSON.parse(raw) as T;
	} catch {
		console.warn(`Failed to parse data-atom-custom-data for atom "${id}"`);
		return null;
	}
};

And do with it as it sees fit.

@frederickobrien frederickobrien self-assigned this Aug 26, 2026
@frederickobrien frederickobrien added the feature Departmental tracking: work on a new feature label Aug 26, 2026
@frederickobrien frederickobrien added this to the Interactives milestone Aug 26, 2026
@github-actions

github-actions Bot commented Aug 26, 2026 •
edited
Loading

Copy link
Copy Markdown

🚀 Image pushed to AWS ECR

Image digest: sha256:08a080ef3fc9fab6ca160f29f86469af6c5045788e98e09c9e72b56e74ece516

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:08a080ef3fc9fab6ca160f29f86469af6c5045788e98e09c9e72b56e74ece516"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-custom-data-for-interactive-atoms"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-30765"

# Refer to image via the GitHub commit SHA tag
# IMAGE_IDENTIFIER=":sha-6bab1afda18b5ba14951366e8fe3877254bdcdc2"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/deployTools --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

From guardian/actions-publish-image.

@frederickobrien
frederickobrien force-pushed the custom-data-for-interactive-atoms branch from 19d3cd9 to c1cce7d Compare August 26, 2026 12:44
@github-actions

github-actions Bot commented Aug 26, 2026 •
edited
Loading

Copy link
Copy Markdown

Deploy build 30765 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@frederickobrien frederickobrien changed the title Make customData available to interactive atoms WIP: Make customData available to interactive atoms Aug 28, 2026
@frederickobrien frederickobrien mentioned this pull request Sep 1, 2026
Merged
@frederickobrien frederickobrien changed the title WIP: Make customData available to interactive atoms Make customData available to interactive atoms Sep 2, 2026
@frederickobrien
frederickobrien marked this pull request as ready for review September 2, 2026 15:51
@github-actions

github-actions Bot commented Sep 2, 2026

Copy link
Copy Markdown

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@frederickobrien
frederickobrien requested review from a team September 2, 2026 17:10
@frederickobrien
frederickobrien force-pushed the custom-data-for-interactive-atoms branch from 0634d2e to 0bbf169 Compare September 3, 2026 09:06
@github-actions

github-actions Bot commented Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown

Deploy build 2993 of dotcom:ab-testing to CODE

All deployment options

From guardian/actions-riff-raff.

@frederickobrien
frederickobrien force-pushed the custom-data-for-interactive-atoms branch 3 times, most recently from 3512d49 to 269eaf7 Compare September 3, 2026 09:19
@frederickobrien frederickobrien added the run_chromatic Runs chromatic when label is applied label Sep 3, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Sep 3, 2026
emma-imber
emma-imber reviewed Sep 3, 2026
View reviewed changes
Comment thread dotcom-rendering/src/lib/interactiveAtoms.test.tsx
emma-imber
emma-imber approved these changes Sep 3, 2026
View reviewed changes

@emma-imber emma-imber left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@frederickobrien
frederickobrien force-pushed the custom-data-for-interactive-atoms branch from 084507d to 6bab1af Compare September 3, 2026 10:16
@frederickobrien frederickobrien added the run_chromatic Runs chromatic when label is applied label Sep 3, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Sep 3, 2026
@frederickobrien
frederickobrien added this pull request to the merge queue Sep 3, 2026
Merged via the queue into main with commit 766d508 Sep 3, 2026
37 checks passed
@frederickobrien
frederickobrien deleted the custom-data-for-interactive-atoms branch September 3, 2026 10:31
@gu-prout

gu-prout Bot commented Sep 3, 2026

Copy link
Copy Markdown

Seen on PROD (merged by @frederickobrien 9 minutes and 26 seconds ago) Please check your changes!

@frederickobrien frederickobrien mentioned this pull request Sep 3, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@emma-imber emma-imber emma-imber approved these changes

Assignees

@frederickobrien frederickobrien

Labels

feature Departmental tracking: work on a new feature Seen-on-PROD

Projects

None yet

Milestone

Interactives

Development

Successfully merging this pull request may close these issues.

2 participants

@frederickobrien @emma-imber